/* eslint-disable vue/no-reserved-component-names */
/* eslint-disable vue/multi-word-component-names */

import { defineAsyncComponent } from 'vue'
import Tailwind from 'primevue/passthrough/tailwind'

import PrimeVue from 'primevue/config'
import Toast from 'primevue/toast'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'

import Password from 'primevue/password'

import ToastService from 'primevue/toastservice'
import DynamicDialog from 'primevue/dynamicdialog'
import DialogService from 'primevue/dialogservice'

//import useXXXX
import { useDialog } from 'primevue/usedialog'
import { useToast } from 'primevue/usetoast'
import { Form, Field, ErrorMessage, useForm, useField } from 'vee-validate'

const components = [InputText, Password, Button, Toast, DynamicDialog, Form, Field, ErrorMessage]

export function mountUI(app) {
  app.use(PrimeVue, { unstyled: true, pt: Tailwind })
  app.use(ToastService)
  app.use(DialogService)

  components.forEach((c) => app.component(c.name, c))
}

export { useDialog, useToast, useForm, useField }
export const DynamicForm = defineAsyncComponent(() => import('./DynamicForm.vue'))
